<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/tentime">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
    <style type="text/css">
        .layui-form-radio {margin: 0px 5px 0 0 !important;}
        .layui-input-block {margin-left: 0px!important;}
    </style>
</head>
<body>
<div class="layui-form tentime-compile">
    <form class="layui-form">
        <input id="refId" type="hidden" th:value="${refId}">
        <input id="type" type="hidden" th:value="${type}">
        <input id="fileType" type="hidden" th:value="${fileType}">
        <input id="path" type="hidden" th:value="${path}">
        <input id="filenum" type="hidden" th:value="${filenum}">
        <div class="layui-upload" style="margin-top: -10px;">
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="cfile" style="margin-left:10px"><i class="fa fa-file-text-o"></i> 选择文件</button>
            <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="uploadBegin" style="margin-left:10px"><i class="fa fa-upload"></i> 开始上传</button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" onclick="closeWin();" type="button"><i class="fa fa-times-circle"></i> 关闭</button>
            <div class="layui-upload-list" style="max-width: 1000px;">
                <table class="layui-table">
                    <colgroup>
                        <col><col width="100"><col width="120"><col width="100">
                    </colgroup>
                    <thead>
                        <tr><th>文件名</th><th>大小</th><th>上传进度</th><th>操作</th></tr>
                    </thead>
                    <tbody id="fileList"></tbody>
                </table>
            </div>
        </div>
    </form>
</div>
<script th:replace="/common/template :: common"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['upload', 'table', 'element'], function() {
        var $ = layui.jquery, upload = layui.upload, table = layui.table, element = layui.element;
        //table.init('fileTable', {/*height: 'full-500'*/});
        //值设置,String refId, type, fileType, path, filenum
        var refId = $('#refId').val(), type = $('#type').val(), fileType = $('#fileType').val(), path = $('#path').val(), fileTotal = $('#filenum').val();
        if (fileType === '') fileType = 'file';
        //文件列表示例
        var num="" ;var show ="";
        var fileListView = $('#fileList'),//上传表格的详情
        uploadListIns = upload.render({//渲染
                elem: '#cfile',//绑定选择文件按钮
                bindAction: '#uploadBegin',//绑定开始上传按钮，如果自动上传则不需要这个按钮
                elemList: fileListView, //列表元素对象
                url: ctx + '/file/upload/file',//后端接口
                data: {'refId': refId, 'type': type, 'path': path},
                accept: fileType,//允许上传文件类型: images（图片）、file（所有文件）、video（视频）、audio（音频）
                multiple: true,//是否允许多文件上传开关
                auto: false,//是否自动上传，true就是选择完文件之后自动上传
                choose: function(obj) {
                    var that = this;
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td id="filename">'+ file.name +'</td>'
                            ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                            ,'<td><div class="layui-progress" lay-filter="progress-demo-'+ index +'"><div class="layui-progress-bar" lay-percent=""></div></div></td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        //单个重传
                        tr.find('.demo-reload').on('click', function(){
                            obj.upload(index, file);
                        });
                        //删除
                        tr.find('.demo-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });
                        that.elemList.append(tr);
                        element.render('progress'); //渲染新加的进度条组件
                    });
                },
                before:function(obj){//这里暂时规定一次只能上传一个文件
                    var file = $("#filename").text();
                    if (fileTotal != '') {
                        var filenum = $("tr").length - 1;
                        if(filenum > fileTotal){
                            layer.msg("系统限定只能上传 " + fileTotal + ' 个文件！');
                            return false;
                        }
                    }
                    if(file == null || file == "") {
                        layer.msg("请选择文件");
                        return false;
                    }
                },
                progress: function(n, elem, e, index){ //注意：index 参数为 layui 2.6.6 新增
                    element.progress('progress-demo-'+ index, n + '%'); //执行进度条。n 即为返回的进度百分比
                },
                done: function(res, index, upload) {
                    var that = this;
                    show = layer.msg('上传中，请稍候',{icon: 16,time:true,shade:0.8});
                    if(res.code == 0){ //上传成功
                        var tr = that.elemList.find('tr#upload-'+ index) ,tds = tr.children();
                        tds.eq(3).html(''); //清空操作
                        delete this.files[index]; //删除文件队列已经上传成功的文件
                        return;
                    }
                    this.error(index, upload);
                    layer.close(show);
                },
                error: function(index, upload,res){
                    var tr = fileListView.find('tr#upload-'+ index), tds = tr.children();
                    tds.eq(2).html('<span style="color: #FF5722;">上传失败:'+res.msg+'</span>');
                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                }
            });
        //这里在点击上传是添加了一个文件类型的判断
        /*
        $(window).one("resize",function(){
            $(".import").click(function(){//上传按钮
                var file = document.getElementById("teacherFile").value;
                var ext = file.slice(file.lastIndexOf(".")+1).toLowerCase();
                if(file==null || file ==""){
                    layer.msg("请选择文件");
                } else if (("xls" != ext)&&("xlsx" != ext) ) {
                    layer.msg("所选择文件不规范");
                    return false;
                } else {
                    layer.msg("选择文件规范");
                }
            });
        }).resize();
         */
    });

</script>
</body>
</html>